import React from 'react'
import { Card, Form, Input, Button, Avatar, Upload, message } from 'antd'
import { UserOutlined, UploadOutlined } from '@ant-design/icons'
import { useUserStore } from '@/stores'

const ProfilePage: React.FC = () => {
  const { user, updateProfile } = useUserStore()
  const [form] = Form.useForm()

  const onFinish = async (values: any) => {
    try {
      await updateProfile(values)
      message.success('个人信息已更新')
    } catch (error) {
      message.error('更新失败，请重试')
    }
  }

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">个人中心</h1>

      <Card>
        <div className="flex items-center mb-6">
          <Avatar size={80} icon={<UserOutlined />} />
          <div className="ml-4">
            <Upload showUploadList={false}>
              <Button icon={<UploadOutlined />}>更换头像</Button>
            </Upload>
          </div>
        </div>

        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{
            name: user?.name || '',
            email: user?.email || '',
          }}
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="手机号" name="phone">
            <Input />
          </Form.Item>

          <Form.Item label="个人简介" name="bio">
            <Input.TextArea rows={4} />
          </Form.Item>

          <Button type="primary" htmlType="submit">
            保存修改
          </Button>
        </Form>
      </Card>
    </div>
  )
}

export default ProfilePage